@media (max-width: 768px) {
            .nav-toggle { display: flex; margin-right: 1rem; margin-top: -3.5rem; margin-bottom: 1rem; }
            nav { width: 100%; max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
            nav.open { max-height: 400px; }
            nav ul { flex-direction: column; }
            .nav-item { width: 100%; border-bottom: 1px solid rgba(255,255,255,0.05); min-height: 48px; }
        }

        @media (max-width: 480px) {
            .area-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
            .area-image { height: 120px; }
            .area-card h3 { padding: 10px; font-size: 0.95rem; }
        }

        @media (max-width: 640px) {
            .split-layout { flex-direction: column; }
            .split-map { min-width: unset; width: 100%; height: 200px; }
        }

@media (max-width: 768px) {
    .places-era-nav-wrap {
        /* FIXED: Changed from sticky to relative to force browser visibility */
        position: relative !important; 
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        
        background: #f5f6f0;
        margin-top: 15px;
        padding: 12px 10px;
        width: 100%;
        box-sizing: border-box;
    }

    .places-era-nav {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px;
        
        /* FIXED: Added a 25px margin to push the timeline items safely away */
        margin-bottom: 30px !important; 
        
        height: auto !important;
        overflow: visible !important;
    }

    .era-btn {
        display: inline-block !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        padding: 8px 14px !important; 
        font-size: 0.85rem !important;
    }
}


        @media (max-width: 640px) {
            .places-timeline::before { left: 18px; }
            .timeline-item, .timeline-item.right { padding-left: 48px; padding-right: 0; justify-content: flex-start; transform: translateX(-20px); }
            .timeline-item::after, .timeline-item.right::after { left: 18px; transform: none; }
            .timeline-card { max-width: 100%; }
            .timeline-item.right .timeline-card { border-left: 4px solid #495944; border-right: none; }
        }

        .area-detail { background: white; padding: 30px; border-radius: 15px; margin-bottom: 50px; display: none; box-shadow: 0 5px 20px rgba(40, 59, 42, 0.06); border: 1px solid rgba(172, 174, 156, 0.3); }
        .detail-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
        .detail-header h2 { margin: 0; font-size: 1.6rem; color: #283B2A; }

        .summary-pdf-btn { display: inline-flex; align-items: center; gap: 7px; background: linear-gradient(135deg, #495944, #283B2A); color: white; text-decoration: none; padding: 9px 18px; border-radius: 22px; font-family: 'Poppins', sans-serif; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.4px; box-shadow: 0 3px 10px rgba(40, 59, 42, 0.15); transition: transform 0.2s, box-shadow 0.2s; white-space: nowrap; }
        .summary-pdf-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(40, 59, 42, 0.25); }

        .articles-section { margin-top: 28px; border-top: 1px solid #eef0e8; padding-top: 22px; }
        .articles-section-title { font-size: 1.05rem; font-weight: 600; color: #283B2A; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }

        .article-accordion { list-style: none; padding: 0; margin: 0; }
        .article-accordion-item { border: 1px solid #ACAE9C; border-radius: 10px; margin-bottom: 10px; overflow: hidden; transition: box-shadow 0.2s; }
        .article-accordion-item:hover { box-shadow: 0 3px 12px rgba(40, 59, 42, 0.1); }

        .article-trigger { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; background: #f4f5f0; cursor: pointer; gap: 10px; border: none; width: 100%; font-family: 'Poppins', sans-serif; text-align: left; }
        .article-trigger-label { font-size: 0.9rem; font-weight: 600; color: #283B2A; flex: 1; }
        .article-trigger-meta { font-size: 0.78rem; color: #5D6A53; white-space: nowrap; }
        .article-trigger-chevron { font-size: 0.7rem; color: #495944; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); flex-shrink: 0; }
        .article-accordion-item.open .article-trigger-chevron { transform: rotate(180deg); }
        .article-accordion-item.open .article-trigger { background: linear-gradient(135deg, #f4f5f0, #eef0e8); }

        .article-panel { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1); background: white; }
        .article-panel-inner { padding: 16px 18px 18px; border-top: 1px solid #eef0e8; }
        .article-panel-inner p { font-size: 0.88rem; color: #5D6A53; line-height: 1.65; margin-bottom: 14px; }

        .article-pdf-btn { display: inline-flex; align-items: center; gap: 7px; background: #8e1f25; color: white; text-decoration: none; padding: 9px 20px; border-radius: 22px; font-family: 'Poppins', sans-serif; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.4px; box-shadow: 0 3px 10px rgba(142, 31, 37, 0.2); transition: transform 0.2s, box-shadow 0.2s; }
        .article-pdf-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(142, 31, 37, 0.35); }

        .modal-pdf-btn { display: inline-flex; align-items: center; gap: 7px; background: #8e1f25; color: white; text-decoration: none; padding: 9px 20px; border-radius: 22px; font-family: 'Poppins', sans-serif; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.4px; margin-top: 12px; box-shadow: 0 3px 10px rgba(142, 31, 37, 0.2); transition: transform 0.2s, box-shadow 0.2s; }
        .modal-pdf-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(142, 31, 37, 0.35); }